<template>
  <div class="ww-blackboard-wraper" :class="{'closed':!open}">
    <div class="ww-blackboard">
      <div class="header">
        <mu-button @click="onClose" icon>
          <mu-icon value="close"></mu-icon>
        </mu-button>
        <mu-button @click="onAddNote" icon>
          <mu-icon value="add_box"></mu-icon>
        </mu-button>
        <mu-button @click="onDelete" icon>
          <mu-icon value="delete"></mu-icon>
        </mu-button>
        <h1>
          仔仔们的小黑板
        </h1>
      </div>
      <div class="content" @mousemove="onMouseMove" @mouseup="onMouseUp">
        <blackboard-item
          v-for="(item,key) in notes"
          :key="key"
          :id="key"
          :type="item.type"
          :position-x="item.position.x"
          :position-y="item.position.y"
          :color="item.color"
          :content="item.content"
          :width="item.width"
          @on-save="onSaveStore"
          @on-click="onClick"
          @on-drag-start="onDragStart"
          @on-resize-start="onResizeStart"
          :style="active===key?'z-index:1001;':''"
        ></blackboard-item>
      </div>
    </div>
    <blackboard-toolbar @on-color-change="onColorChange"></blackboard-toolbar>
  </div>
</template>
<script>
import BlackboardItem from './BlackboardItem'
import BlackboardToolbar from './BlackboardToolbar'
export default {
  name: 'ww-blackboard',
  props: {
    value: {
      type: Boolean,
      required: true,
    },
  },
  components: {
    BlackboardItem,
    BlackboardToolbar,
  },
  data () {
    return {
      open: this.value,
      active: 0,
      dragging: false,
      dragStart: {
        x: 0,
        y: 0,
      },
      resizing: false,
      resizeStart: 0,
    }
  },
  computed: {
    notes () {
      return this.$store.state.notes
    },
  },
  methods: {
    onSaveStore ({ id, content }) {
      var note = this.notes[id]
      note.content = content
      this.$store.commit('UPDATE_NOTE', {
        idx: id,
        note: note,
      })
      this.onSaveServer()
    },
    onSaveServer () {
      this.$store.dispatch('postNotes').catch(err => {
        this.$log.error('save fail:', err.message)
      })
    },
    onClick (id) {
      this.active = id
    },
    onAddNote () {
      this.$store.commit('ADD_NOTE')
    },
    onColorChange (color) {
      if (this.active < 0) return
      var note = this.notes[this.active]
      note.color = color
      this.$store.commit('UPDATE_NOTE', {
        idx: this.active,
        note: note,
      })
      this.onSaveServer()
    },
    onMouseMove (e) {
      this.onDrag(e)
      this.onResize(e)
    },
    onMouseUp (e) {
      this.onDragStop(e)
      this.onResizeStop(e)
      this.onSaveServer()
    },
    onDragStart ({ id, x, y }) {
      this.active = id
      this.dragStart = { x, y }
      this.dragging = true
    },
    onDrag (e) {
      if (!this.dragging) return
      var note = this.notes[this.active]
      note.position.x += e.clientX - this.dragStart.x
      note.position.y += e.clientY - this.dragStart.y
      this.dragStart.x = e.clientX
      this.dragStart.y = e.clientY
      this.$store.commit('UPDATE_NOTE', {
        idx: this.active,
        note: note,
      })
    },
    onDragStop () {
      this.dragging = false
      this.dragStart.x = 0
      this.dragStart.y = 0
    },
    onResizeStart ({ id, x }) {
      this.active = id
      this.resizeStart = x
      this.resizing = true
    },
    onResize (e) {
      if (!this.resizing) return
      var note = this.notes[this.active]
      note.width += e.clientX - this.resizeStart
      this.resizeStart = e.clientX
      this.$store.commit('UPDATE_NOTE', {
        idx: this.active,
        note: note,
      })
    },
    onResizeStop () {
      this.resizing = false
      this.resizeStart = 0
    },
    onDelete () {
      this.$store.commit('DELETE_NOTE', this.active)
    },
    async onClose () {
      await this.onSaveServer()
      this.open = false
    },
  },
  watch: {
    value (newV) {
      this.open = newV
    },
    open (newV) {
      this.$emit('input', newV)
    },
  },
}
</script>
<style lang="scss">
.ww-blackboard-wraper {
  overflow: scroll;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  transition: 0.5s;
  z-index: 1000;
  background: #424043;

  &.closed {
    right: 100%;
    z-index: -1;
  }
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px;
    z-index: 1001;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 0;
    background: rgba(#fff, 0.9);
    z-index: 1001;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 0;
    background: #424043;
    z-index: 1001;
  }
}
.ww-blackboard {
  padding: 20px;
  display: flex;
  flex-direction: column;
  font-family: "XinDiHeiBanBaoDiZi";
  background-image: url("https://cdn.yujianghao.cn/black-1072366.jpg");
  min-width: 2376px;
  min-height: 1584px;
  background-size: cover;
  overflow: hidden;
  .header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    h1 {
      flex: 1;
      margin: 0;
      margin-left: 20px;
      user-select: none;
    }
  }
  .content {
    flex: 1;
    position: relative;
  }
}
</style>
